<template>
	<view>
		<view @click="visible = !visible">
			<slot name="button" :names="names"></slot>
		</view>
		<view class="picker-modal" :class="{'modal-show': visible}">
			<view class="picker-title">
				<button class="btn-class" @tap="cancel">取消</button>
				<button class="btn-class ok-class" @tap="ok">确定</button>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="values" @change="bindChange">
				<picker-view-column>
					<view class="item-view" v-for="(item,index) in cols1" :key="index">{{item.NAME}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item-view" v-for="(item,index) in cols2" :key="index">{{item.NAME}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'picker-view',
			values: [-1, -1],
			visible: false,
			indicatorStyle: `height: 30px;`,
			cols1: [],
			cols2: [],
			colsAll: []
		};
	},
	computed: {
		names() {
			return [
				this.cols1[this.values[0]] ? this.cols1[this.values[0]].NAME : '请选择',
				this.cols2[this.values[1]] ? this.cols2[this.values[1]].NAME : '请选择',
			]
		},
		cols1Names() {
			return this.cols1.map(item => item.NAME)
		}
	},
	watch: {
		value(n) {
			this.values = [
				this.cols1.map(item => item.NAME).indexOf(this.value[0]),
				this.cols2.map(item => item.NAME).indexOf(this.value[1]),
			]
		}
	},
	props: {
		value: {
			type: Array,
			default: () => {
				return ['试讲', '体验']
			}
		}
	},
	mounted: async function() {
		if (uni.MC_DEAN_COM) {
			this.cols1 = uni.MC_DEAN_COM.colf
			this.colsAll = uni.MC_DEAN_COM.colsAll
		} else {
			const { data: colf } = await this.$http.request('/jjzx_app/common/getDictionaries', {
				DICTIONARYID: '77',
				PARENTID: '0',
			}, "POST")
			const { data: colsAll } = await this.$http.request('/jjzx_app/common/getDictionaries', {
				DICTIONARYID: '77',
				p: '0',
			}, "POST")
			this.cols1 = colf
			this.colsAll = colsAll
			uni.MC_DEAN_COM = {
				colf, colsAll
			}
		}
		const i = this.cols1Names.indexOf(this.value[0])
		if (i < 0) {
			this.cols1 = [{
				NAME: '请选择'
			}, ...this.cols1]
			return;
		}
		this.cols2 = this.colsAll.filter((item, index)=>{
			return item.PARENTID === this.cols1[i].ID
		})
		this.values = [
			this.cols1.map(item => item.NAME).indexOf(this.value[0]),
			this.cols2.map(item => item.NAME).indexOf(this.value[1]),
		]
		console.log(this.values)
	},
    methods: {
        bindChange: function (e) {
            const val = e.detail.value
			const col1 = this.cols1[val[0]]
			if (this.values[0] !== val[0]) {
				this.cols2 = this.colsAll.filter((item, index)=>{
					return item.PARENTID === this.cols1[val[0]].ID
				})
				val[1] = 0
			}
			console.log(val)
			this.values = [...val]
        },
		cancel() {
			this.visible = false
		},
		ok() {
			this.$emit('input', this.names)
			this.visible = false
		}
    }
};
</script>

<style>
	.ok-class {
		color: #007AFF;
	}
	.btn-class {
		background-color: #FFF;
	}
	.btn-class::after{
		border: none !important;
	}
	.item-view {
		width: 100%; 
		height: 30px;
		text-align: center;
	}
	.picker-modal {
		width: 100vw;
		height: 0;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		transition: height 200ms ease-in-out; 
	}
	.picker-modal picker-view {
		height: 200px;
	}
	.modal-show {
		height: 240px;
	}
	.picker-title {
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 1px 2px 8px #888888;
	}
	.picker-title button {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}
</style>
